<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/dict' }">字典列表</el-breadcrumb-item>
      <el-breadcrumb-item>{{ pageInfo.name }}日志</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form ref="form" :model="dictInfo" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="字典名称">
              <el-input :disabled="type" v-model="dictInfo.remark" size="mini" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字典标识" >
              <el-input :disabled="type" v-model="dictInfo.dictKey" size="mini" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字典类型">
              <el-select v-model="dictInfo.type" :disabled="type" placeholder="请选择" size="mini">
                <el-option key="字典类型" label="字典类型" :value="3"></el-option>
                <el-option key="系统变量" label="系统变量" :value="1"></el-option>
                <el-option key="用户变量" label="用户变量" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="dictInfo.type!==3">
            <el-form-item label="类型编码">
              <el-select v-model="dictInfo.typeCode" :disabled="type" placeholder="请选择" size="mini">
                <el-option :key="item.id" :label="item.remark" :value="item.value" v-for="item in typeList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

<!--          <el-col :span="8">
            <el-form-item label="描述">
              <el-input :disabled="type" v-model="dictInfo.remark" size="mini" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="字典状态">
              <el-select v-model="dictInfo.dictState" :disabled="type" placeholder="请选择" size="mini">
                <el-option key="开启" label="开启" :value="1"></el-option>
                <el-option key="关闭" label="关闭" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dictInfo.type!==3">
            <el-form-item label="修改样式">
              <el-select v-model="dictInfo.styleType" :disabled="type" placeholder="请选择" size="mini">
                <el-option label="下拉框" value="select"></el-option>
                <el-option label="大文本" value="text"></el-option>
                <el-option label="输入框" value="input"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="dictInfo.type!==3">
            <el-form-item label="数据地址">
              <el-input :disabled="type" v-model="dictInfo.selectUrl" size="mini" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="字典值">
              <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  size="mini"
                  :autosize="{ minRows: 6, maxRows: 12}"
                  :disabled="type"
                  v-model="dictInfo.value">
              </el-input>

            </el-form-item>
          </el-col>



          <el-col :span="24">
            <div class="button-pattern">
              <el-button type="primary" v-if="!type" round size="mini" @click="saveDict()">{{pageInfo.name}}</el-button>
              <el-button round size="mini" @click="$router.push({path:'/dict'});pageInfo={}">返回</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>

import {getByIdDishesDict,saveOrUpdateDishesDict,removeByIdDishesDict,getDictType} from '../../api/dictApi'

export default {
  name: "dictSaveAndEdit",
  data() {
    return {
      pageInfo: {
        name: "添加",
        type: false
      },
      type: false,
      dictInfo: {},
      typeList:[]
    }
  },
  created() {
    this.queryDictType()
    this.pageInfo.name=this.$route.query.name
    if (this.pageInfo.name==='查看'){
        this.type=true
    }

    if (this.pageInfo.name!=='添加'){
      this.getByDictId(this.$route.query.id)
    }
  },
  methods:{
    getByDictId(item){
      getByIdDishesDict(item).then(res=>{
        this.dictInfo=res.data.entity
      })
    },
    saveDict(){
      saveOrUpdateDishesDict(this.dictInfo).then(res=>{
        if (res.code === 20000) {
          this.pageInfo={}
          this.$router.push({path:'/dict'})
          this.$notify({title: '成功', message: '保存成功', type: 'success'});
        }
      })
    },
    queryDictType(){
      getDictType().then(res=>{
        console.log(res)
        this.typeList=res.data.dataList
      })
    }
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>

.button-pattern{
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
}
</style>
